<!-- src/views/SearchBooksView.vue -->
<template>
  <div class="search-books-view">
    <el-container>
      <el-header>
        <h2>📚 图书搜索</h2>
      </el-header>
      <el-main>
        <el-card>
          <el-form :model="searchForm" label-width="80px">
            <el-form-item label="作者">
              <el-input
                v-model="searchForm.author"
                placeholder="输入作者姓名"
                @keyup.enter="searchByAuthor"
              />
            </el-form-item>
            <el-form-item label="分类">
              <el-select
                v-model="searchForm.genre"
                placeholder="选择分类"
                @change="searchByGenre"
              >
                <el-option label="文学" value="文学" />
                <el-option label="小说" value="小说" />
                <el-option label="编程" value="编程" />
                <el-option label="历史" value="历史" />
                <el-option label="科学" value="科学" />
                <el-option label="艺术" value="艺术" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="searchByAuthor"
                :disabled="!searchForm.author"
                icon="Search"
              >
                按作者搜索
              </el-button>
              <el-button
                type="success"
                @click="searchByGenre"
                :disabled="!searchForm.genre"
                icon="Filter"
                style="margin-left: 10px"
              >
                按分类搜索
              </el-button>
              <el-button @click="clearSearch" style="margin-left: 10px">
                清空
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <el-table
          :data="searchResults"
          v-loading="loading"
          style="width: 100%; margin-top: 20px"
          border
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="isbn" label="ISBN" width="180" />
          <el-table-column prop="title" label="书名" />
          <el-table-column prop="author" label="作者" width="150" />
          <el-table-column prop="genre" label="分类" width="120" />
          <el-table-column label="状态" width="120">
            <template #default="scope">
              <el-tag
                :type="scope.row.available ? 'success' : 'danger'"
                effect="dark"
              >
                {{ scope.row.available ? '可借阅' : '不可借阅' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="viewDetail(scope.row.id)"
                icon="View"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { createBookService } from '@/services/bookServiceFactory'
import { Search, Filter, View } from '@element-plus/icons-vue'

export default {
  name: 'SearchBooksView',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Search,
    // eslint-disable-next-line vue/no-unused-components
    Filter,
    // eslint-disable-next-line vue/no-unused-components
    View
  },
  setup() {
    const router = useRouter()
    const searchForm = reactive({
      author: '',
      genre: ''
    })
    const searchResults = ref([])
    const loading = ref(false)
    const bookService = createBookService()

    const searchByAuthor = async () => {
      if (!searchForm.author) return

      try {
        loading.value = true
        searchResults.value = await bookService.getBooksByAuthor(searchForm.author)
      } catch (error) {
        console.error('Search by author failed:', error)
        searchResults.value = []
      } finally {
        loading.value = false
      }
    }

    const searchByGenre = async () => {
      if (!searchForm.genre) return

      try {
        loading.value = true
        searchResults.value = await bookService.getBooksByGenre(searchForm.genre)
      } catch (error) {
        console.error('Search by genre failed:', error)
        searchResults.value = []
      } finally {
        loading.value = false
      }
    }

    const clearSearch = () => {
      searchForm.author = ''
      searchForm.genre = ''
      searchResults.value = []
    }

    const viewDetail = (id) => {
      router.push(`/books/${id}`)
    }

    return {
      searchForm,
      searchResults,
      loading,
      searchByAuthor,
      searchByGenre,
      clearSearch,
      viewDetail
    }
  }
}
</script>

<style scoped>
.search-books-view {
  height: 100vh;
}
.el-header {
  background-color: #f5f7fa;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
}
.el-main {
  padding: 20px;
}
</style>